// ***************************第一部分内容**********************
let backgrounds = [
    "https://imgcache.gtimg.cn/mediastyle/app/download/img/index/banner_pc.jpg?max_age=2592000&v=180d42ed7af7320f0f71b0d4bd1648b3",
    "https://imgcache.gtimg.cn/mediastyle/app/download/img/index/banner_mac.jpg?max_age=2592000&v=5232771b6d92828dc42cb15252b4beca",
    "https://imgcache.gtimg.cn/mediastyle/app/download/img/index/banner_iphone.jpg?max_age=2592000&v=240022a708893f156704986eca2d57de",
    "https://imgcache.gtimg.cn/mediastyle/app/download/img/index/banner_android.jpg?max_age=2592000&v=0a88fa4b7204bba753b15f05c0d22cbc"
] 
let nav = document.querySelectorAll('.nav>div');
let mod_banner = document.querySelector(".mod_banner")
let mod_banner_li = document.querySelectorAll(".mod_banner>ul>li")
for (let i = 0; i < nav.length; i++) {
    nav[i].addEventListener("click", () => {
        document.querySelector(".active1").classList.remove("active1")
        document.querySelector(".active").classList.remove("active")
        //单击添加样式active1,换背景
        mod_banner_li[i].classList.add("active1")
        if (i == 2) {
            let ti = document.querySelectorAll(".title")[2].style
            ti.backgroundPosition = "-636px -323px"
            console.log(ti);
            ti.width = "370px"
            ti.height = "160px"
        }
        if (i == 3) {
            document.querySelectorAll(".title")[2].style.backgroundPosition = "-636px 0"

        }
        //单击添加样式active,图标增加高亮
        nav[i].classList.add("active")
        mod_banner.style.background = `url('${backgrounds[i]}')50% no-repeat`

    })
}
function getrandom(min,max){
return Math.floor(Math.random()*(max-min+1)-min)
}

//*******************第一部分的流星效果

setInterval(()=>{

let weizhi_width=getrandom(50,mod_banner.offsetWidth-500)
let liuxing=document.createElement("div")

liuxing.style.right=weizhi_width+"px"
liuxing.classList.add("liuxing")
liuxing.style.animation=`liuxing ${Math.random()+3}s ${Math.random()}s  linear`

mod_banner.append(liuxing)

setTimeout(() => {
    liuxing.remove()
},2000);
},800)



// *********************第二部分内容
let divbg = "https://imgcache.gtimg.cn/mediastyle/app/download/img/singer/sprite1.jpg?max_age=2592000&v=24e02ba88e3a04fd1f264a138c8f5e8f"

let mod_banner2 = document.querySelector(".mod_banner2")
let mod2_div = document.createElement("div")
mod2_div.style.width = "212px"
mod2_div.style.height = "212px"
// mod2_div.style.transform ="scale(1.5)";
let adddiv = ""
for (let i = 1; i < 16; i++) {
    mod2_div.classList.add(`in`)

    mod2_div.style.background = `url("${divbg}") no-repeat`;
    mod2_div.style.backgroundPosition = `0 -${212 * i}px`;
    adddiv += mod2_div.outerHTML

}
mod_banner2.innerHTML += adddiv + adddiv+adddiv
let mod_banner2top, yc
mod_banner2All = document.querySelectorAll(".in");
//给第二部分后面的图片给动画
window.addEventListener("scroll", () => {
    
    for (let j = 0; j < mod_banner2All.length; j+=2) {
        mod_banner2top = mod_banner2All[j].offsetTop +100
       
        yc = Math.random()+0.5
      //当内容滚动到图片这部分来的时候,添加动画
        if (document.documentElement.scrollTop > mod_banner2top) {
            
            if(mod_banner2All[j].style.animation=="")
            mod_banner2All[j].style.animation = `div1 1.5s ${yc}s linear`;

        }else{
            mod_banner2All[j].style.animation =""
        }
    }
})

